<template>
  <div class="userBox">
    <h1 class="title">用户列表</h1>
    <div class="tableBox">
      <el-table :data="userList" border height="550">
        <el-table-column prop="uid" label="ID" align="center"/>
        <el-table-column label="头像" align="center">
          <template #default="scope">
            <el-image
                fit="contain"
                lazy
                class="headerImg"
                :src="scope.row.header"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名" align="center"/>
        <el-table-column prop="account" label="账号" align="center"/>
        <el-table-column prop="wid" label="小部件Id" align="center"/>
        <el-table-column prop="color" label="字体颜色" align="center"/>
        <el-table-column prop="bg" label="背景颜色" align="center"/>
        <el-table-column prop="primary" label="激活字体颜色" align="center"/>
      </el-table>
    </div>
  </div>
</template>

<script setup>
  import {onBeforeMount,reactive} from "vue"
  import {ElMessage} from "element-plus"

  import {http} from "../config/axios/index.js"

  //用户列表
  const userList = reactive([])
  //获取数据
  async function getData(){
    let type = "error"
    const res = await http({
      method: "POST",
      url: "user/get_user"
    })
    if(res.data.code === 0){
      type = "success"
      userList.push(...res.data.data.userList)
    }
    //提示消息
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
      type
    })
  }

  //组件挂载前
  onBeforeMount(()=>{
    getData()
  })
</script>

<style scoped>
  .userBox{
    width: 100%;
    padding: 20px;
  }
  .tableBox{
    padding-top: 20px;
  }
  :deep(.cell){
    line-height: 1;
  }
  .headerImg{
    height: 50px;
  }
</style>